<style lang="sass" scoped>
    .common_block{
        margin-bottom:50px;
        .item_pro{
            img{
                width:80px;
                height:70px;
                border:solid 1px #eee;
                margin-right:10px;
            }
        }
    }
    .con_menu_top{
        .tabled{
            width:100%;
            margin:0!important;
            padding:0!important;
        }
        .button_list{
            width:100%;
            overflow:hidden;
        }
    }
    .con_main_content{
        width:100%;
        overflow-x:auto;
    }
    .form-horizontal{
        img.upload_img{
            width:100px;
            height:100px;
            border:solid 1px #eee;
        }
    }
    .upload_some_imgs{
        font-size:50px;
        color:#ccc;
        margin-top:20px;
        margin-left:15px;
        cursor:pointer;
    }
</style>

<template>
    <div class="container-fluid">
        <div class="row comm_conent_padding">
            <div class="comm_content_top mb20">
                <h1 class="bigsize yahei">商品管理</h1>
                <nav-bar><li slot="nav_two">编辑</li></nav-bar>
            </div>
            <div class="common_block">
                <div class="head head-default">
                    <i class="largeiconfont"></i>
                    <span>编辑商品</span>
                </div>
                <div class="content pd15">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="datas.g_name" class="form-control w-800" placeholder="商品名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品图片</label>
                            <div class="col-sm-10">
                                <img class="upload_img float-left" v-if="datas.g_image" :src="datas.g_image">
                                <div v-on:click="uploadPhoto" class="upload_some_imgs bigiconfont float-left">&#xe630;</div>
                                <input type="hidden" v-model="datas.g_image" class="form-control w-800" placeholder="商品名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">所属品牌</label>
                            <div class="col-sm-10">
                                <select class="form-control w-800" v-model="datas.b_id">
                                    <option value="">选择品牌</option>
                                    <option v-for="item in brands" value="{{item.b_id}}">{{item.b_name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">所属分类</label>
                            <div class="col-sm-10">
                                <select class="form-control w-800" v-model="datas.t_id">
                                    <option value="">选择分类</option>
                                    <option v-for="item in categorys" value="{{item.t_id}}">{{item.t_name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品市场价</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="datas.g_market" class="form-control w-800" placeholder="商品市场价">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品销售价</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="datas.g_price" class="form-control w-800" placeholder="商品销售价">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品位置</label>
                            <div class="col-sm-10">
                                <label><input type="radio" v-model="datas.g_place" name="g_place" value="1">新品区</label>
                                <label><input type="radio" v-model="datas.g_place" name="g_place" value="2">特价区</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品库存量</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="datas.g_stock" class="form-control w-800" placeholder="商品库存量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">上架状态</label>
                            <div class="col-sm-10">
                                <label><input v-model="datas.g_shelves" type="radio" name="g_shelves" value="0">上架</label>
                                <label><input v-model="datas.g_shelves" type="radio" name="g_shelves" value="1">下架</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品简介</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="datas.g_intro" class="form-control w-800" placeholder="商品简介">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">商品详情</label>
                            <div class="col-sm-10">
                                <textarea v-model="datas.g_detail" class="form-control w-800" rows="3" placeholder="商品详情"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                 <button type="button" v-on:click="addUpdaGoods" class="btn btn-info br0">提交商品信息</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import navBar from 'commonvue/navBar' 
    export default {
        components: {
            navBar,
        },
        data () {
            return {
                goodsId:'',
                type:'add',
                datas:{
                    g_name:'', //商品名称
                    g_image:'', //图片地址
                    b_id:'',//所属品牌
                    t_id:'', //所属分类
                    g_market:'',//商品市场价
                    g_price:'',//商品销售价
                    g_place:'',
                    g_stock:'',
                    g_shelves:'',
                    g_intro:'',
                    g_detail:'',
                }, 
                brands:[], //品牌列表
                categorys:[], //分类列表
            }
        },
        route: {
            data ({to: {query, params}}) {
                this.goodsId=params.goodsId;
                if(this.goodsId&&this.goodsId!='add') {
                    this.selectGoodsById();
                    this.type='update';
                }
                this.getBrandsCategorys();
            }
        },
        methods: {
            //获得商品列表信息
            selectGoodsById(){
                common.ajax({
                    url:config.baseApi+'cms/api/goods/selectGoodsById',
                    data:{
                        goodsId:this.goodsId,
                    },
                }).then(((data)=>{
                    this.datas=data.data&&data.data.length?data.data[0]:{};
                }))
            },
            // 获得品牌|分类信息
            getBrandsCategorys(){
                common.ajax({
                    url:config.baseApi+'cms/api/common/getBrandsCategorys',
                }).then(((data)=>{
                    this.brands=data.data&&data.data.length&&data.data[0]?data.data[0]:[];
                    this.categorys=data.data&&data.data.length&&data.data[1]?data.data[1]:[];
                }))
            },
            //提交商品信息
            addUpdaGoods(){
                this.datas.type = this.type=='add'?'add':'update';
                common.ajax({
                    url:config.baseApi+'cms/api/goods/addOrUpdateGoods',
                    data:this.datas,
                }).then(((data)=>{
                    popup.miss({title:'操作成功！'});
                    setTimeout(function(){
                        window.history.back(-1);
                    }, 500);
                }));
            },
            // 上传图片
            uploadPhoto(){
                common.cerateFileFormData({
                    filename:'file',
                    url:config.baseApi+'cms/api/common/uploadPictures',
                    success:((data)=>{
                        console.log(data);
                    })
                });
            },
            
        },

    }
</script>